<template>
  <div>
    <h1>当前求和为:{{sum}}</h1>
    <h1>当前求和为:{{bigSum}}</h1>
    <h1>学校:{{school}}</h1>
    <h1>岗位:{{subject}}</h1>
    <h2>下方组件的总人数：{{personList.length}}</h2>

    <select v-model.number="n">
      <option value=1>1</option>
      <option value=2>2</option>
      <option value=3>3</option>
    </select>
    <button @click="JIA(n)">+</button>
    <button @click="JIAN(n)">-</button>
    <button @click="incrementOdd">当前求和为奇数再加</button>
    <button @click="incrementWait">等一等再加</button>
  </div>
</template>

<script>

import {mapGetters, mapMutations, mapState,mapActions} from  'vuex';

   export default {
        name:  'Count',
        data(){
         return{
            n:1,
          
         }
        },
        computed:{
          //借助mapState去映射state中的值 --对象写法
         // ...mapState({he:'sum'})

         // ...mapState(['sum','school','subject','personList']),
          ...mapState('countAbout',['sum','school','subject']),
          ...mapState('personAbout',['personList']),
          ...mapGetters('countAbout',['bigSum'])
        //  ...mapGetters(['bigSum'])
        },
        components: {},
        methods:{
          //   increment(){
          //     this.$store.commit('JIA',this.n);
          // //  this.sum+=this.n;
          //   },
          //   decrement(){
          //     //  this.sum-=this.n;
          //   },
         incrementOdd(){
          // if(this.sum%2){
          //   this.sum+=this.n;
          // }
         },
        incrementWait(){
          // setTimeout(()=>{
          //  this.sum+=this.n+1
          // },2000)
        },
//如果需要参数，在mapmutations中传递好参数

        //借助mapMutations生成对应的方法，方法会调用commit去联系mapmutations(对象写法)
         // ...mapMutations({increment:'JIA',decrement:'JIAN'}) 

          ...mapMutations('countAbout',['JIA','JIAN']),
        //  ...mapActions({JIA:'jia'}),
      //  ...mapActions(['jia'])
        }
   }
</script>

<style scoped></style>
